<script setup lang="ts">

</script>

<template>
  <div class="wty-container mt-20 mb-10">


          <!-- 主体内容 -->
        <div class="container">
            <section class="about-section" style="padding: 2px 250px">
                <h1 class="letter-title mt-10">致每一位相遇的朋友、徒弟与同学</h1>
                <div class="letter-content">
                    <p>来自五湖四海的你，或许是初入编程的新手，或许是寻求突破的学习者，甚至是志同道合的前辈——有幸因缘分相聚于此，便是我们彼此的幸运。</p>

                    <p>年少时，我的梦想是成为一名人民教师，想把所知所悟传递给更多人。虽因种种际遇，辗转于各行各业，但这些经历也让我积攒了一身实战经验，更懂“行路难”，也更懂初学者最需要什么。</p>

                    <p>如今，为了圆年少的理想，也为了帮更多人少走弯路，这个平台应运而生。</p>

                    <p>有人会问：“为什么选择你们？你们的优势是什么？”</p>

                    <p class="quote">我曾遇到一位影响我一生的良师，他说过一句话，至今刻骨铭心：“普通的老师教知识，优秀的老师教方法，而真正厉害的老师，教的是‘思想’。”</p>

                    <p>这句话我记了很多年，也用亲身经历验证了它的重量——知识会过时，方法会迭代，但解决问题的思维、克服困难的毅力、避开坑洼的经验，才是能伴随一生的财富。</p>

                    <p>所以在这个平台上，我们不想只做“知识的搬运工”：</p>

                    <ul class="value-list">
                        <li>我们会教你编程技能，但更会教你“如何快速学会一项技能”的方法；</li>
                        <li>我们会带你做实战项目，但更会带你拆解“从0到1解决问题”的思路；</li>
                        <li>我们会分享行业经验，但更会传递“遇到挫折不放弃”的韧劲。</li>
                    </ul>

                    <p>我们不敢说自己高尚，也谈不上伟大。只是曾经有人照亮过我们前行的路，如今便想成为那束微光，力所能及地照亮后来者的征途。</p>

                    <p>愿在这里，我们不仅是师生、是师徒，更是并肩前行的朋友。<br>
                    愿你带着收获离开，更带着“能解决所有未知问题”的底气，奔赴更远的路。</p>

                    <div class="closing">
                        一群曾被照亮、也想照亮他人的行路者<br>
                        于2025年秋
                    </div>
                  <hr class="mt-10">
                  <div class="mt-10 mb-10">
                    我们始终相信，好的引导值得被珍视。平台的运营、课程的打磨、一对一的答疑，都需要持续的投入 —— 不是为了盈利，而是为了能长久地照亮更多人的路。如果你认可我们的理念，愿意和我们一起深耕，我们也准备了不同阶段的陪伴服务，从基础带练到进阶实战，让每一份信任都能换来实实在在的成长。
                  </div>
                </div>
            </section>
        </div>
  </div>

</template>

<style scoped>
        /* 主体内容 */
        .about-section {
            background-color: white;
            border-radius: 12px;
            padding: 60px 80px;
            margin-top: 40px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            position: relative;
        }
        .about-section::before {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 6px;
            background-color: #3498db;
            border-radius: 0 0 10px 10px;
        }
        .letter-title {
            font-size: 28px;
            color: #2c3e50;
            margin-bottom: 40px;
            text-align: center;
            font-weight: 500;
        }
        .letter-content {
            font-size: 17px;
            color: #444;
        }
        .letter-content p {
            margin-bottom: 25px;
            text-align: justify;
        }
        .highlight {
            color: #3498db;
            font-weight: 500;
        }
        .quote {
            border-left: 3px solid #3498db;
            padding-left: 20px;
            margin: 30px 0;
            color: #555;
            font-style: italic;
        }
        .value-list {
            margin: 30px 0;
            padding-left: 20px;
        }
        .value-list li {
            margin-bottom: 15px;
            position: relative;
            padding-left: 25px;
        }
        .value-list li::before {
            content: "•";
            position: absolute;
            left: 0;
            color: #3498db;
            font-size: 20px;
            line-height: 1;
        }
        .closing {
            margin-top: 40px;
            text-align: right;
            color: #555;
        }
</style>